<template>
	<el-dialog
		v-if="visible"
		title="团队返点明细"
		:visible="visible"
		width="900px"
		center
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<p
			style="font-size: 20px;font-weight: bold;color: #000000;margin-bottom: 20px;"
		>
			{{ $t('代理账号信息') }}
		</p>
		<el-table
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="proxyAccountInfo"
			style="width: 100%;margin-bottom: 20px;"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column align="center" label="代理账号" prop="proxyName">
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="直属上级"
				prop="parentProxyName"
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '/' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.belong_merchant')}`"
				prop="merchantName"
			>
				<template slot-scope="scope">
					{{ scope.row.merchantName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="accountStatus"
				align="center"
				:label="$t('common.account_status')"
				min-width="100"
			>
				<template slot-scope="scope">
					<span
						v-if="!!scope.row.paymentLockStatus"
						class="deleteRgba"
					>
						{{ $t('common.account_lock_status') }}
						<br />
					</span>
					<span
						v-if="!!scope.row.loginLockStatus"
						class="disableRgba"
					>
						{{ $t('common.login_lock_status') }}
						<br />
					</span>
					<span v-if="!!scope.row.gameLockStatus" class="lockingRgba">
						{{ $t('common.game_lock_status') }}
					</span>
					<span
						v-if="
							!scope.row.loginLockStatus &&
								!scope.row.gameLockStatus &&
								!scope.row.paymentLockStatus
						"
						class="normalRgba"
					>
						{{ $t('common.account_status_normal') }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				:label="`${$t('common.register_time')}`"
				prop="createdAt"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<!-- 应收返点统计 -->
		<ProxyRebateSummary :detailData="detailData" />
		<!-- 返点明细 -->
		<div class="mt20">
			<p class="name">
				返点明细
			</p>
			<ProxyRebateDetail :detailData="detailData" />
		</div>
	</el-dialog>
</template>

<script>
import ProxyRebateSummary from '@/components/Funds/ProxyRebateSummary'
import ProxyRebateDetail from '@/components/Funds/ProxyRebateDetail'
export default {
	components: { ProxyRebateSummary, ProxyRebateDetail },
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
		// 格式:
		// detailData: {
		// 	proxyId:'935950203562270737',
		//  reportType:1,
		// 	reportDate:'20231124'
		// }
	},
	data() {
		return {
			proxyAccountInfo: []
		}
	},
	mounted() {
		if (this.detailData.proxyId) {
			this.getProxyAccountDetail()
		}
	},
	methods: {
		// 关闭
		handleClose() {
			this.closeDialog(false)
		},
		getProxyAccountDetail() {
			const params = {
				userName: this.detailData.proxyName,
				merchantId: this.detailData.merchantId
			}
			this.proxyAccountLoading = true
			// this.proxyAccountInfo = []
			this.$api
				.getProxyAccountInfo(params)
				.then((res) => {
					this.proxyAccountLoading = false
					this.proxyAccountInfo.push(res.data)
				})
				.catch(() => {
					this.proxyAccountLoading = false
				})
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
	color: #303133;
	margin-bottom: 10px;
}
</style>
